<template>
	<view class="xinjiankehu-box">
		
		<view class="box">
			<view class="row">
				<view class="left">
					头像
				</view>
				<view class="right">
					<view class="">
						<image class="touxiang-image" src="http://ai.ylcaifu.com/appimg/images/5.0-%E6%88%91%E7%9A%84-%E7%90%86%E8%B4%A2%E5%B8%88/5.2-%E8%AE%BE%E7%BD%AE/android/drawable-xhdpi/touxiang.png" mode=""></image>
					</view>
					<view class="">
						<label class="iconfont"> &#xe640;</label>
					</view>
				</view>
			</view>
			<view class="row">
				<view class="left">
					昵称
				</view>
				<view class="right">
					<view class="">
						
					</view>
					<view class="">
						<label class="iconfont"> &#xe640;</label>
					</view>
				</view>
			</view>
			<view class="row">
				<view class="left">
					简介
				</view>
				<view class="right">
					<view class="">
						
					</view>
					<view class="">
						<label class="iconfont"> &#xe640;</label>
					</view>
				</view>
			</view>
			<view class="row">
				<view class="left phone">
					联系方式
				</view>
				<view class="right">
					<view class="">
						<input v-model="phoneNum" :value="phoneNum" class="phone-edit" />
					</view>
					<view class="">
						<label class="iconfont"> &#xe640;</label>
					</view>
				</view>
				
			</view>
			<view class="questionBox" @click="loginOut">
				<view class="question">
					<label class="iconfont label" >&#xe653;</label>退出登录
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var _self;
	//引入全局变量
	import global_ from '../../../components/tool/Global'
	export default {
		components: {
			global_
		},
		data() {
			return {
				url:global_.api.loginOutUrl,
				token:'',
				loginRole:'',
				phoneNum:''
			};
		},
		onLoad(){
			_self = this;
				//从缓存中获取登录用户角色
			var userInfo=uni.getStorageSync('userinfo_key');
			if(''!=userInfo&&null!=userInfo){
				var role=userInfo.loginRole;
				this.loginRole=role;
			}
			//判断当前登录用户的身份
			if(this.loginRole==3){
				
			}else{
				this.token=uni.getStorageSync('token_key');
			}
		},
		methods:{
				loginOut(){
					//从缓存中获取登录用户角色
					var userInfo=uni.getStorageSync('userinfo_key');
					if(''!=userInfo&&null!=userInfo){
						var role=userInfo.loginRole;
						this.loginRole=role;
					}
					uni.clearStorageSync();
					//判断当前登录用户的身份
					if(this.loginRole==3){
						uni.redirectTo ({
								url: '../../../pages/shouye/login',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
					}else{
						uni.showNavigationBarLoading();
						uni.request({
							method:'POST',
							url: _self.url, 
							header : {'content-type':'application/x-www-form-urlencoded'},
							data: {
								token:_self.token,
							},
							
							dataType:'json',
							success: (res) => {
								uni.redirectTo ({
									url: '../../../pages/shouye/login',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
								
							},fail:(res) => {
								console.log("fail");
							},complete:(res) => {
								//停止当前页面下拉刷新。
								uni.hideNavigationBarLoading();
								uni.stopPullDownRefresh();
							}
						});
					}
				
			}
		}
	}
</script>

<style>
	page {
		background: rgb(255, 255, 255);
	}

	.xinjiankehu-box {
		padding-top: 10px;
		background: #f5f5f5;
	}
	.box{
		padding: 0 30upx;
		background: rgb(255, 255, 255);
	}
	
	.row {
		height: 49px;
		border-bottom: 1px solid rgba(238,238,238,1);
		display: flex;
		/* flex-direction: row; */
		align-items: center;
		justify-content: space-between;
	}
	
	.left {
		font-size: 15px;
		margin-right: 20upx;
		flex: 1;
		
	}

	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;
		margin-top: 50%;

	}

	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);

	}

	.label {
		margin:0 10upx;
	}
	.right{
		/* flex: 3;
		text-align: right; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center ;
		
		color: #CCCCCC;
		
	}
	.row .phone {
		white-space:nowrap;
	}
	.phone-edit {
		width: 240px;
		height: 50px;
	}
	.touxiang-image{
		height: 20px;
		width: 20px;
	}
</style>
